﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Virus.Index" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>休闲webgame -- 吞噬者 v0.0.9 </title>
    <meta name="keyword" content="webgame 吞噬者 模拟病毒" />
    <meta content="webgame 吞噬者 模拟病毒" name="description" />
    <meta name="Author" content="七日工作室" />
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
    <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="js/jquery.colorPicker-1.1.0.pack.js" type="text/javascript"></script>
    <script src="js/jqModal.dev.js" type="text/javascript"></script>
    <script src="js/jqDnR.js" type="text/javascript"></script>
    <script src="js/dimensions.js" type="text/javascript"></script>
    <script src="js/jquery.corner.js" type="text/javascript"></script>
    <script src="js/json.js" type="text/javascript"></script>
    
    <link href="css/css.css"  type="text/css" rel="stylesheet"/>
    
    <script type="text/javascript">
    
    var PlayerMap = new Array();
    var playerSelf = null;

    function Init()
    {    
        var str = "";    
        for(var x = 0; x < 20; x++)
        {
            str += "<tr>";
            for(var y = 0; y < 20; y++)
            {
                str +="<td id='" + x + "_" + y + "' style='background-color:white' onclick='vClick(this, event)'></td>";
            }
            str += "</tr>";
        }
        $("#map").append(str).find('td').each(function(o){
            var td = $(this);
            td.hover(movein, moveout);
        });
        
        window.setTimeout('viewVirus();', 100);
        if ($("#PlayerName").text() != "")
        {
            playerSelf = new Player(parseInt($("#PlayerName").attr("pid")), $("#PlayerName").text(), 0, $("#PlayerColor").text());
        }
        
        $("#Login").jqm({trigger:'#aLogin',overlay:0, modal:true}).jqDrag('.title');
        $("#Change").jqm({trigger:'#aChangeColor',overlay:0, modal:true}).jqDrag('.title'); 
        $("#Register").jqm({trigger:'#aRegister', overlay:0, modal:true}).jqDrag('.title'); 
    }

    /*玩家对象*/    
    function Player(id, name, eat, color, virus)
    {
        this.ID = id;
        this.Name = name;
        this.Eat = eat;
        this.Color = color;
        this.Virus = virus;
    }
    
    //  鼠标移入地图的TD
    function movein()
    {
        var id =$(this).attr('pid');
        
        if (id != 0)
        {
            var p = PlayerMap[id];
            if (p == null)
                return;
            $("#viewPlayer").text(p.Name);
            $("#viewEat").text(p.Eat);
            $("#viewVirus").text(p.Virus);
            $("#viewWidth").text($(this).attr("vWidth"));
        }
    }
    
    //  鼠标移出地图的TD
    function moveout()
    {
        $("#viewPlayer").text("");
        $("#viewEat").text(""); 
        $("#viewVirus").text("");
        $("#viewWidth").text("");
    }
    
    //  处理玩家变更颜色的方法
    function ChangeColorClick()
    {
        var color = $("#edtNewColor").val();
        JSWSCall("ChangeColor", {color:color}, function(msg){
            if (msg != "")
                alert(msg);
            else
                viewVirus();
        });
        $("#Change").jqmHide();
    }
    
    //  异步检查用户名是否存在
    function checkRegName()
    {
        var name = $("#edtRegName").val();
        if (name == null || name == "")
        {
            $("#checkUser").text("请输入用户名");
        }
        else
        {
            JSWSCall("CheckNameExists", {name:name}, function(ret)
            {
                if (ret)
                    $("#checkUser").text("用户名已经存在");
                else
                    $("#checkUser").text("该用户名未使用");
                    
            });
        }
    }
    
    //  点击病毒显示弹出窗口
    function vClick(td, e)
    {
        var t = $(td);
        $("#edtX").val(t.attr("x"));
        $("#edtY").val(t.attr("y"));
        
        var id = t.attr("pid");
        if (id == 0)
        {
            if (playerSelf != null && playerSelf.ID != 0)
            {
                var v = $("#divAddVirus");
                v.css({top:e.clientY-1,left:e.clientX-1});
                v.show();
            }
        }
        else 
        {
            if (playerSelf != null && playerSelf.ID == id)
            {
                var v = $("#divUseItem");
                v.css({top:e.clientY-1,left:e.clientX-1});
                v.show();        
            }
        }
    }
    
    //  检查密码是否一致
    function checkPassword()
    {
        var v1 = $("#edtRegpwd").val();
        var v2 = $("#edtRegpwd2").val();
        if (v1 == "" || v2 == "")
        {
            $("#checkPassword").text("密码不能为空");
            return false;
        }   
        
        if (v1 != v2)
            $("#checkPassword").text("两次输入密码不一致");
        else
            $("#checkPassword").text("");
            
        return v1 == v2;
    }
    
    //  用户注册
    function register()
    {
        if (!checkPassword())
            return;
        var name = $("#edtRegName").val();
        var pwd = $("#edtRegpwd").val();
        var color = $("#edtColor").val();
        JSWSCall("Register", {name:name,password:pwd,color:color}, function(msg)
        {
            if (msg != "")
                alert(msg);
            else
            {
                Login2(name, pwd);
                $("#Register").jqmHide();
             }
        });
    }
    
    //  用户登录
    function Login()
    {
        var name = $("#edtLoginName").val();
        var pwd = $("#edtLoginPwd").val();
        
        Login2(name, pwd);
    }
    
    function Login2(name, pwd)
    {
        JSWSCall("Login", {name:name,password:pwd}, function(p)
        {
            if (p.Name == "")
            {
                alert('用户名或者密码错误');
            }
            else
            {
                $("#Login").jqmHide();
                
                var playerInfo = $("#loginOK");
                playerInfo.find("#PlayerName").text(p.Name);
                playerInfo.find("#PlayerColor").text(p.Color);
                playerInfo.find("#PlayerColor").css("color", "#" + p.Color);
                playerInfo.show();
                
                playerSelf = p;
                
                $("#NoLogin").hide();
                viewVirus();
            }
        });
    }
    
    function Logout()
    {
        JSWSCall("Logout", {}, function(msg)
        {
            $("#loginOK").hide();
            $("#NoLogin").show();
            playerSelf = null;
            viewVirus();
        });
    }
    
    function WSCall(funName, param, fun, error)
    {
        $.ajax({
            beforeSend: showLoading,
            type: "POST",
            url: "ws.asmx/" + funName,
            contentType:'application/x-www-form-urlencoded;utf-8',
            data:param,
            success: fun,
            error:error,
            complete:hideLoading
        });
    }
    
    function JSWSCall(funName, param, fun, error)
    {
        var p = {};
        if (param != null)
            p = param;
            
        $.ajax({
            beforeSend: showLoading,
            type: "POST",
            data: $.toJSON(p),
            url: "ws.asmx/" + funName,
            contentType:'application/json;charset=UTF-8',
            dataType:"json",
            success: fun,
            error:error,
            complete:hideLoading
        });
    }
    
    //  显示loading
    function showLoading()
    {
        var l = $("#loading");        
        var b = $(document.body);
        
        l.css({top:(b.height() - l.height()) / 2, left:(b.width() - l.width()) / 2});
        l.show();
    }
    
    //  取消loading显示
    function hideLoading()
    {
        $("#loading").hide();
    }
    
    //  投放病毒
    function addVirus()
    {
        var x = $("#edtX").val();
        if (x == null || x == "")
        {
            alert("请输入X坐标");
            return;
        }
        
        var y = $("#edtY").val();
        if (x == null || y == "")
        {
            alert("请输入Y坐标");
            return;
        }
        
        JSWSCall("AddVirus", {x:x,y:y,mapID:0}, function(msg)
        {
            if (msg.length > 0)
                alert(msg);
            else
                viewVirus();                 
        });
        $("#divAddVirus").hide();        
        $("#divUseItem").hide();
    }
    
    //  使用道具
    function useItem(type)
    {
         $("#divAddVirus").hide();  
         
        var x = $("#edtX").val();
        if (x == null || x == "")
        {
            alert("请输入X坐标");
            return;
        }
        
        var y = $("#edtY").val();
        if (x == null || y == "")
        {
            alert("请输入Y坐标");
            return;
        }
        
        JSWSCall("UseItem", {x:x,y:y,type:type,mapID:0}, function(msg)
        {
            if (msg.length > 0)
                alert(msg);
            else
                viewVirus();
        });
        $("#divAddVirus").hide();          
        $("#divUseItem").hide();
    }
    
    function GetKey(x, y)
    {
        return x * 1000 + y;
    }
    
    function viewVirus2()
    {
        var x = $("#edtX").val();
        if (x == null || x == "")
        {
            alert("请输入X坐标");
            return;
        }
        
        var y = $("#edtY").val();
        if (x == null || y == "")
        {
            alert("请输入Y坐标");
            return;
        }
        
        viewVirus3(x, y);
    }
    
    function viewVirus()
    {
        viewVirus3(lastX, lastY);
    }
    
    function viewVirus4(t)
    {
        if (t == 0) {viewVirus3(lastX, lastY - 10);return;}
        if (t == 1) {viewVirus3(lastX + 10, lastY);return;}
        if (t == 2) {viewVirus3(lastX, lastY + 10);return;}
        if (t == 3) {viewVirus3(lastX - 10, lastY);return;}
    }
    
    var lastX = 0, lastY = 0;
    function viewVirus3(x, y)
    {
        lastX = x; lastY = y;
        
        //  异步调用获得病毒的内容
        JSWSCall("GetVirus", {x:x,y:y,mapID:0}, function(ret){

            $("#edtX").val(ret.X);
            $("#edtY").val(ret.Y);
            lastX = ret.X; lastY = ret.Y;
            
            $("#mapTop").text(ret.X - 10);
            $("#mapLeft").text(ret.Y - 10);
            $("#mapBottom").text(ret.X + 10);
            $("#mapRight").text(ret.Y + 10);
            
            SetTime(ret.LessTime);
            
            $("#Nutrient").text(ret.Nutrient);
            $("#Eat").text(ret.PlayerEat);
            $("#currentVirus").text(ret.PlayerVirus);
            var vmap = new Array();

            for(var i = 0; i < ret.player.length; i++)
            {
                var  p = ret.player[i];
                PlayerMap[p.ID] = p;
            }
            
            for(var i = 0; i < ret.virus.length; i++)
            {
                var v = ret.virus[i];
                var key = GetKey(v.X, v.Y);
                v.Color = PlayerMap[v.pID].Color;
                vmap[key] = v;
            }
            
            for(var x = 0; x < 20; x++)
                for(var y = 0; y < 20; y++)
                {
                    var vx = x - 10 + ret.X;
                    var vy = y - 10 + ret.Y;
                    var key = GetKey(vx, vy);
                    var pn = vmap[key];
                    var td = $("#"+x+"_"+y);
                    
                    td.attr("x", vx);
                    td.attr("y", vy);
                    
                    td.css('cursor','default');
                    
                    if (pn == null)
                    {
                        td.css('background-color', 'white');
                        td.attr("pid", 0);
                        
                        if (playerSelf != null && playerSelf.ID != 0)
                            td.css('cursor','pointer');
                    }
                    else
                    {
                        td.css('background-color', pn.Color);
                        
                        td.attr("pid", pn.pID);
                        td.attr("vWidth", pn.width);
                        
                        if (playerSelf != null && playerSelf.ID == pn.pID)
                        {
                            //  设置如果鼠标自己病毒的鼠标格式
                            td.css('cursor','pointer');
                        }
                    }
                }
        });
    }
    
    //  倒计时代码
    var lastTimeout;
    function SetTime(span)
    {
        clearTimeout(lastTimeout);
        $("#LessTime").attr("endtime", new Date().getTime() + span * 1000);
        lastTimeout = window.setTimeout('DoTime();', 0);
    }
    
    //  刷新倒计时，如果倒计时为0时，重新获取地图里病毒的信息
    function DoTime()
    {
        var control = $("#LessTime");
        var endTime = control.attr("endtime");
        var span = endTime - new Date().getTime();
        
        if (span > 0)
        {
            var nH=Math.floor(span/(1000*60*60)) % 24;
            var nM=Math.floor(span/(1000*60)) % 60;
            var nS=Math.floor(span/1000) % 60;
            control.text(nH+":"+nM+":"+nS);
            lastTimeout = window.setTimeout('DoTime();', 1000);
        }
        else
        {
            viewVirus();
        }
    }
    
    //  判断鼠标是否移出当前区域
    function isMoveout(o, e)
    {
        if (e.clientX <= o.offsetLeft || e.clientX >= o.offsetLeft + $(o).width())
            return true;
        if (e.clientY <= o.offsetTop || e.clientY >= o.offsetTop + $(o).height())
            return true;
        return false;
    }
    
    </script>
    <style type="text/css">

#Register{
    padding:5px;
}
body
{
    font-size:12px;
}

#map td
{
    width:20px; height:20px;
}
body{
    padding:0px; margin:0px; font-size:12px;
}
input
{
    width:120px;
}
.title
{
    text-align:center; background-color:Yellow; padding:3px;  cursor:move;
}
.popForm
{
    display:none; position:absolute; left:100px; top:100px; background-color:#99CCFF; padding:4px; width:240px; color:black;
}
#left
{
    padding-left:30px; width:200px; float:left;
}
#left ul
{
    list-style:none; margin:0px; padding:0px; padding-top:10px;
}
#left li
{
    padding-top:3px;
}
.mtitle
{
    background-color:#99CCFF; text-align:center; vertical-align:middle; font-size:14px; font-weight:bold; padding:3px;
}
</style>
 
</head>
<body onload="Init()">
    <form id="form1" runat="server">
    <div id="title" style="width:100%; height:60px; text-align:center; ">
    <div style=" font-size:20px; font-weight:bold">吞噬者</div>
    </div>
    <div style="width:100%">
    <div id="left">
    <div id="mainMenu" style="padding:10px 0 10px 0">
    <ul id="NoLogin" runat="server">
    <li><a id="aLogin" href="#">登录</a></li>
    <li><a id="aRegister" href="#">注册</a></li>
    </ul>
    <ul id="loginOK" runat="server">        
        <li>玩家名字:<span id="PlayerName" runat="server" ></span></li>
        <li>颜色:<span id="PlayerColor" runat="server"></span></li>
        <li><a id="aChangeColor" href="#">变更颜色</a></li>
        <li><a href="javascript:Logout()">退出</a></li>
    </ul>
    </div>
    
    <div class="mtitle">游戏介绍</div>
    <ul>
    <li></li>
    <li>吞噬者是一款模拟病毒分裂的游戏，玩家在注册成功后，可以获得100点养分。</li>
    <li>玩家可以点击地图里的空白处投放病毒，或者当地图存在自己的病毒后，点击自己的病毒使用道具。</li>
    <li>每间隔一定时间（120秒）所有病毒会进行一次分裂。分裂后如果有多个病毒同时到达同一个区域，则在这个区域内的病毒会发生吞噬计算，最强壮的，或者数量最多的病毒将存活下来。</li>
    <li>每成功分裂出一个病毒，将奖励玩家1点养分，可用于再次投放病毒，养分最多可以累积到200点。</li>
    </ul>
    <ul>
    <li>更新日志：</li>
    <li>208.12.10 v0.0.9</li>
    <li>1.增加管理页面可以重置服务器</li>
    <li>2.增加2个道具：</li>
    <li>	无敌：3个回合内病毒无法分裂，同时也无法被吞噬</li>
    <li>	超级分裂：下一个回合分裂出8个病毒</li>
    <li>3.修正病毒吞噬时权重计算错误的bug</li>
    <li><a href="history.txt">更多</a></li>
    </ul>
    </div>
    <div id="mian" style="width:460px; float:left">
    <table border="0" cellpadding="2" cellspacing="0">
    <tr>
    <td></td>
    <td id="mapTop">0</td>
    <td></td>
    </tr>
    <tr>
    <td valign="top" id="mapLeft">0</td>
    <td><table id="map" cellpadding="0" cellspacing="1" style="background-color:Black"></table></td>
    <td valign="bottom" id="mapBottom">20</td>
    </tr>
    <tr>
    <td></td>
    <td align="right" id="mapRight">20</td>
    <td></td>
    </tr>
    </table>
    
    </div>
    <div id="right" style="width:200px; float:left">
    <div>地图尺寸:</div>
    <div>当前养分:<span id="Nutrient" runat="server">0</span></div>
    <div>吞噬数量:<span id="Eat" runat="server">0</span></div>
    <div>当前病毒:<span id="currentVirus" runat="server">0</span></div>
    <div>剩余时间:<span id="LessTime"></span></div>
    <div>X:<input type="text" id="edtX" value="10" size="4" />Y:<input type="text" id="edtY" value="10" size="4" /></div>
    <div style=""><button onclick="viewVirus2()" style="float:left; vertical-align:middle">查看</button> <table border="0" >
    <tr>
    <td></td><td><a href="javascript:viewVirus4(0)">A</a></td><td></td>
    </tr>
    <tr>
    <td><a href="javascript:viewVirus4(3)">《</a></td><td></td><td><a href="javascript:viewVirus4(1)">》</a></td>
    </tr>
    <tr>
    <td></td><td><a href="javascript:viewVirus4(2)">V</a></td><td></td>
    </tr>
    </table></div>
    <div>

    </div>
    <div style="padding-top:10px;">
        <div>玩家:<span id="viewPlayer"></span></div>
        <div>吞噬:<span id="viewEat"></span></div>
        <div>病毒:<span id="viewVirus"></span></div>
        <div>生命:<span id="viewWidth"></span></div>
    </div>
    </div>
    </div>
    <div id="footer" style="width:100%; clear:both; text-align:center; padding:10px;" >
    版权所有 七日工作室
    </div>
    <div id="Register" class="popForm" style=" width:360px;">
    <div class='title'>玩家注册</div>
    <table style="text-align:left" border="0" cellpadding="3" cellspacing="0">
    <tr>
    <td style="text-align:right">用户名:</td>
    <td><input type="text" id="edtRegName" onblur="checkRegName()" /><span id="checkUser" style="color:Red"></span></td>
    </tr>
    <tr>
        <td style="text-align:right">密码:</td>
        <td><input type="password" id="edtRegpwd" onblur="checkPassword()" /></td>
    </tr>
        <tr>
        <td style="text-align:right">再次输入密码:</td>
        <td><input type="password" id="edtRegpwd2" onblur="checkPassword()" /><span id="checkPassword" style="color:Red"></span></td>
    </tr>
        <tr>
        <td style="text-align:right">颜色:</td>
        <td><input type="text" id="edtColor" onclick="$(this).colorPicker({ setValue:true,setBackground:false })" onfocus="$(this).colorPicker({ setValue:true,setBackground:false })" /></td>
    </tr>
        <tr>
        <td style="text-align:right"></td>
        <td><button id="btnReg" onclick="register()" >确定</button>
    <button id="btnCloseReg" onclick="$('#Register').jqmHide()" >取消</button>
    <span id="RegisterResult" style="color:Red"></span></td>
    </tr>
    </table>

    </div>
    <div id="Change" class='popForm'>
    <div class='title'>变更颜色</div>
        <table style="text-align: left" border="0" cellpadding="3" cellspacing="0">
            <tr>
                <td style="text-align: right">颜色:</td>
                <td><input type="text" id="edtNewColor" onfocus="$(this).colorPicker({ setValue:true,setBackground:false })" /></td>
            </tr>
        <tr>
        <td style="text-align:right"></td>
        <td>
        <button id="btnChangeColor" onclick="ChangeColorClick()" >确定</button>
        <button id="Button2" onclick="$('#Change').jqmHide()">取消</button>
        </td>
    </tr>
        </table>
    </div>
    <div id="Login" class='popForm'>
    <div class='title'>用户登录</div>
    <table style="text-align:left" border="0" cellpadding="3" cellspacing="0">
    <tr>
    <td style="text-align:right">用户名:</td>
    <td><input type="text" id="edtLoginName"/></td>
    </tr>
    <tr>
        <td style="text-align:right">密码:</td>
        <td><input id="edtLoginPwd" type="password" /></td>
    </tr>
    <tr>
        <td style="text-align:right; cursor:default;"></td>
        <td>
        <button id="btnLogin" onclick="Login()">确定</button>
        <button id="btnCloseLogin" onclick='$("#Login").jqmHide()'>取消</button>
    </td>
    </tr>
    </table> 
    </div>   
    <div id="divAddVirus" style="display:none; background-color:Black; position:absolute;" onmouseout='if (isMoveout(this, event)) $(this).hide()'>
        <div style="color:White; padding:5px;" onclick='addVirus()' onmousemove="$(this).css('background-color', 'green')" onmouseout="$(this).css('background-color', 'Black')">投放病毒</div>
    </div>
    <div id="divUseItem" style="display:none; background-color:Black; position:absolute;" onmouseout='if (isMoveout(this, event)) $(this).hide()'>
        <div style="color:White; padding:5px;" onclick='useItem(0)' onmousemove="$(this).css('background-color', 'green')" onmouseout="$(this).css('background-color', 'Black')">立即扩散</div>
        <div style="color:White; padding:5px;" onclick='useItem(1)' onmousemove="$(this).css('background-color', 'green')" onmouseout="$(this).css('background-color', 'Black')">强心针</div>
        <div style="color:White; padding:5px;" onclick='useItem(2)' onmousemove="$(this).css('background-color', 'green')" onmouseout="$(this).css('background-color', 'Black')">无敌</div>
        <div style="color:White; padding:5px;" onclick='useItem(3)' onmousemove="$(this).css('background-color', 'green')" onmouseout="$(this).css('background-color', 'Black')">强化</div>
    </div>
    <div id="loading" style="width:71px; height:19px; background-color:White; display:none; position:absolute; font-size:16px; color:Red; font-weight:bold; padding:5px;">Loading...</div>
    </form>
</body>
</html>
